<template lang='pug'>
  .login(v-loading="loading"
    element-loading-text="正在登录..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)")
    .form.pac
      .logo.fs-xl.fc-b1 用户登录
      .username.row
        el-input(v-model="form.username" size='small' placeholder="请输入账号" 
        @blur="username" max="20" type="text" autofocus clearable autoComplete='on'
        @keyup.enter.native='submitForm')
          template(slot="prepend")
            i.el-icon-mobile-phone.fc-b1.fs-l
        .error(v-show="uFlag") 账号不能为空
      .pwd.row
        el-input(v-model="form.password" size='small' placeholder="请输入密码" 
        @blur="password" max="20" type="password" clearable
        @keyup.enter.native='submitForm')
          template(slot="prepend")
            i.el-icon-lock.fc-b1.fs-l
        .error(v-show="pFlag") 密码不能为空
      .auth.row
        el-input(v-model="form.vcode" size='small' placeholder="请输入验证码" 
        @blur="auth" max="5" type="text" clearable
        @keyup.enter.native='submitForm')
          template(slot="prepend")
            i.iconfont.icon-anquan.fc-b1.fs-l
        .img.hand(@click="changeAuth()")
          img(:src="authUrl")
        .error(v-show="aFlag") 验证码不能为空
      .options
        el-button.mgb2(type="primary" @click="submitForm") 登录
        //- a.logup(href="#") 快速注册→
        span.find-pwd.primary.mgl2.hand(@click="$router.push({name: 'signup'})") 注册
        span.find-pwd.hand(@click="$router.push({name: 'forget'})") 找回密码
        
</template>

<script>
// import CookieJs from "js-cookie"

export default {
  data() {
    return {
      baseUrl: $globalconfig.URLS.API,
      form: {
        username: '',
        password: '',
        vcode: '',
      },
      authUrl: '',
      uFlag: false,
      pFlag: false,
      aFlag: false,
      loading: false,
    };
  },
  created() {
    this.authUrl = `${this.baseUrl}common/vcode?_t=${Date.now()}`
    // console.log(this.$route.query)
    // this.$api.getVcodeImage().then(res => {
    //   console.log(res)
    // })
  },
  mounted() {
    this.$cookie.remove("access_token")
  },
  methods: {
    // 刷新验证码
    changeAuth() {
      this.authUrl = `${this.baseUrl}common/vcode?_t=${Date.now()}`
    },
    submitForm() {
      this.loading = true;
      // if (this.username() && this.password()) {
      //   this.loading = false;
      // } else {
      //   this.$vgo.tip("请填写正确的用户名和密码!", "warning");
      //   this.loading = false;
      //   return;
      // }

      // 验证输入框
      this.username()
      this.password()
      this.auth()

      if (!this.uFlag && !this.pFlag && !this.aFlag) {
        // console.log(this.form);
        this.loading = false;
        this.$api.login(this.form).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.$vgo.tip("登陆成功!", "success")

            // this.$store.dispatch('getUserInfo')
            // 拉取购物车数据
            // this.$store.dispatch('getCartList')

            // let userInfo = window.location.href.slice(window.location.href.indexOf("access_token"))
            // let arr = userInfo.split("&")
            // let expires = arr[1].split("=")[1]
            // expires = expires / 60 / 60 / 24
            // CookieJs.set("UserAccount", userInfo, { expires })

            if (this.$route.query && this.$route.query.redirect_uri) {
              window.open(this.$route.query.redirect_uri, '_self')
            } else {
              this.$router.push({ name: "home" })
            }
          }
        });
      } else {
        this.loading = false;
      }
    },
    username() {
      if (this.form.username.length < 1) {
        this.uFlag = true;
        return false;
      } else {
        this.uFlag = false;
        return true;
      }
    },
    password() {
      if (this.form.password.length < 1) {
        this.pFlag = true;
        return false;
      } else {
        this.pFlag = false;
        return true;
      }
    },
    auth() {
      if (this.form.vcode.length < 1) {
        this.aFlag = true;
        return false;
      } else {
        this.aFlag = false;
        return true;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/index.styl';

.login {
  width: 100%;
  height: 100vh;
  background-image: url('/static/images/login/bg.jpg');
  background-size: cover;
  background-position: center;
  position: relative;

  .form {
    position: absolute;
    width: 350px;
    padding: 10px 25px 15px;
    background-color: #fff;

    .logo {
      text-align: center;
      height: 60px;
      width: 100%;
      line-height: 60px;

      img {
        height: 30px;
      }
    }

    .row {
      margin-bottom: 25px;
      position: relative;
      text-align: center;

      .el-input {
        width: 90%;
        margin: 0 auto;

        .el-input-group__prepend {
          padding: 0 10px;
        }
      }

      .error {
        position: absolute;
        bottom: -20px;
        font-size: 12px;
        left: 20px;
        color: $danger;
      }
    }

    .auth {
      text-align: left;

      .el-input {
        margin-left: 5%;
        width: 55%;
      }

      .img {
        margin-right: 5%;
        height: 35px;
        line-height: 45px;
        float: right;

        img {
          display: block;
          height: 32px;
        }
      }
    }

    .options {
      text-align: center;
      padding: 0 10px;

      .el-button {
        width: 100%;
      }

      .logup {
        float: left;
        color: $blue;
        height: 40px;
        line-height: 40px;
      }

      .find-pwd {
        height: 40px;
        line-height: 40px;
        float: right;
      }
    }
  }
}
</style>
<style lang="stylus">
.form {
  .el-input-group__prepend {
    padding: 0 10px;
  }
}

</style>
